<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas绘制base64的图片</title>
</head>

<body>
  <!-- 
  1.先将base64的图片保存到本地中去，获取临时路径，若本地中存在该图片时，先清除再生成
    base64的图片必须要清除前缀标识符才能保存到本地中(data:image/png;base64,)
  2.绘制圆形的图片
  3.将canvas的图片转为路径并保存到本地内存中
  4.可以通过uni.getImageInfo({});获取到图片的信息(宽度高度和路径)
  5.通过在onReady这个生命周期函数里面获取到canvas的宽高
 -->
</body>
<script>
  "use strict"; {
    /* 
    先将base64的图片保存到本地中去
      write_base64() {
        const managers = uni.getFileSystemManager();
        // #ifdef MP-WEIXIN
        const filePath = `${wx.env.USER_DATA_PATH}/share.png`;
        // #endif
        // 写入之前先将文件删除
        return new Promise((result, reject) => {
          managers.unlink({
            filePath,
            complete: res => {
              managers.writeFile({
                filePath,
                data: base64.split("data:image/png;base64,")[1],
                encoding: 'base64',
                success: res1 => {
                  result(filePath);
                },
                fail: err => {
                  reject(err);
                },
              });
            }
          });
        });
      },
    */


    /* 
    async get_img(canvas_id = `canvas`, canvas_width, canvas_height, bg_width = 250, bg_top = 10, avatar_width = 100,
        user_name = `李白`, fill_style = `#000000`, font_size = 40) {
        const ctx = uni.createCanvasContext(`${canvas_id}`);
        // 将canvas的画布背景设置为白色
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(0, 0, canvas_width, canvas_height);
        ctx.restore();
        // ==将canvas的画布背景设置为白色==
        // 获取背景图片(二维码)
        let res1 = await this.write_base64();
        // 得到用户头像
        let [err2, res2] = await uni.downloadFile({
          url: this.url2,
        });
        ctx.drawImage(res1, (canvas_width - bg_width) / 2, bg_top, bg_width, bg_width);
        // 绘制圆角的图片
        ctx.save();
        ctx.beginPath();
        ctx.arc(canvas_width / 2, bg_width / 2 + bg_top, avatar_width / 2, 0, Math.PI * 2, false);
        ctx.clip();
        ctx.drawImage(res2.tempFilePath, (canvas_width - avatar_width) / 2, (bg_width - avatar_width) / 2 +
          bg_top,
          avatar_width, avatar_width);
        ctx.restore();
        // 绘制圆角的图片
        ctx.setFontSize(font_size);
        ctx.setFillStyle(fill_style);
        // measureText测量文本的宽度
        ctx.fillText(user_name, (canvas_width - ctx.measureText(user_name).width) / 2, bg_width + bg_top +
          font_size);
        ctx.draw();
      },
    */

    /* 
    uni.canvasToTempFilePath({
		canvasId: e.target.id,
		success: res => {
			this.save_image_to_photos_album(res.tempFilePath);
		}
    */

    /*
    uni.saveImageToPhotosAlbum({
			filePath,
			success: res => {
				console.log(`保存成功了`);
			}
		});
    */

    /* 
    获取宽高
    onReady() {
			uni.createSelectorQuery().in(this).select(`#canvas`).fields({
				size: true
			}, res => {
				
			}).exec();
		},
    */
  };
</script>

</html>